<template>
  <div class="app">
    <Headers :graphic="graphic" />
    <div class="bbb">
      <router-link :to="'/construction'">
      <div class="item" style="width: 130px;
  height: 26px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: black;
  font-size: 26px;
  margin-right: 100px;
  font-weight:  bold;">学科简介</div>
      </router-link>
      <div
        class="item"
        style="
           width: 0px;
          height: 36px;
          border: 1px solid;
          border-color: #666666;
        "
      ></div>
      <div class="item" style="color: #b21315;margin-right: 100px;">学科资源</div>
      <div
        class="item"
        style="
           width: 0px;
          height: 36px;
          border: 1px solid;
          border-color: #666666;
        "
      ></div>
      <router-link :to="'/xkjsone'">
      <div
        class="item"
        style="
          width: 130px;
          height: 26px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: black;
          font-size: 26px;
          font-weight:  bold
          margin-right: 100px;
        "
      >
        学术精英榜
      </div></router-link>
    </div>
    <div class="a">
      <div class="a-a"><span>教保条件</span></div>
      <div class="a-b">
        <span
          >军事科学院拥有先进的科研平台，拥有各类重点实验室100余个，其中，国
          家重大科技基础设施3个，国家重点实验室6个，国防科技重点实验室3个，国家
          工程重点实验室1个，军队与省市级重点实验室近100个，另有各类研究中心72
          个，国际与国内认证认可实验室36个。</span
        >
      </div>
      <div class="a-c"><img src="@/assets/imgs/x.png" alt="" /></div>
      <div class="a-d"></div>
    </div>
    <div class="b"><span>国家重大科技基础设施</span></div>
    <div class="c">
      <div class="c-a" style="background-color: #b21315">
        <span>国家蛋白质科学中心</span>
      </div>
      <div class="c-b"><span>多功能结冰风洞</span></div>
      <div class="c-d"><span>大型低速风洞</span></div>
    </div>
    <div class="d">
      <div class="d-a"><img src="@/assets/imgs/x.png" alt="" /></div>
      <div class="d-b">
        <div class="d-b-a">国家蛋白质科学中心</div>
        <div class="d-b-b">
          国家蛋白质科学中心·北京(简称“凤凰中心”)
          依托国家蛋白质科学重大科技基础设施北京基地、蛋白质组学国家重点实验室和北京蛋白质组研究中心组建而成，拥有国际上最大规模的高端蛋白质组测序平台和以“天河
          2
          号”架构超级计算机为代表的国际顶尖硬件设施。建有蛋白质组学分析、功能蛋白…
        </div>
        <div class="d-b-c">
          <span
            style="
              width: 72px;
              height: 18px;
              font-family: Source Han Sans CN;
              font-weight: 700;
              color: #ffffff;
              font-size: 18px;
            "
            >了解详情</span
          >
        </div>
      </div>
    </div>
    <div class="e" v-for="item in 4" :key="item">
      <div style="margin-top: 90px; margin-left: 170px">
        <span
          style="
            width: 224px;
            height: 33px;
            font-family: Source Han Sans CN;
            font-weight: 700;
            color: #666666;
            font-size: 32px;
            line-height: 1px;
          "
          >国家重点实验室</span
        >
      </div>
      <div class="e-a">
        <div>蛋白质组学国家重点实验室</div>
        <div>病原微生物与生物安全国家重点实验室</div>
        <div>抗毒药物与毒理学国家重点实验室</div>
      </div>
      <div class="e-a" style="margin-top: 10px">
        <div>蛋白质组学国家重点实验室</div>
        <div>病原微生物与生物安全国家重点实验室</div>
        <div>抗毒药物与毒理学国家重点实验室</div>
      </div>
    </div>
    <div style="margin-top: 90px; margin-left: 170px">
      <span
        style="
          width: 224px;
          height: 33px;
          font-family: Source Han Sans CN;
          font-weight: 700;
          color: #666666;
          font-size: 32px;
          line-height: 1px;
        "
        >中国科学院院士</span
      >
      <div class="f" style="margin-top: 70px" v-for="item in 4" :key="item">
        <div>
          <div style="margin-right: 141px">
            <img
              src="@/assets/imgs/t.png"
              alt=""
              style="width: 254px; height: 294px"
            />
          </div>
          <div>
            <span
              style="
                width: 108px;
                height: 36px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #6a6a6a;
                font-size: 36px;
              "
              >毛用泽</span
            >
          </div>
        </div>
        <div style="margin-right: 141px">
          <div>
            <img
              src="@/assets/imgs/t.png"
              alt=""
              style="width: 254px; height: 294px"
            />
          </div>
          <div>
            <span
              style="
                width: 108px;
                height: 36px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #6a6a6a;
                font-size: 36px;
              "
              >毛用泽</span
            >
          </div>
        </div>
        <div style="margin-right: 141px">
          <div>
            <img
              src="@/assets/imgs/t.png"
              alt=""
              style="width: 254px; height: 294px"
            />
          </div>
          <div>
            <span
              style="
                width: 108px;
                height: 36px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #6a6a6a;
                font-size: 36px;
              "
              >毛用泽</span
            >
          </div>
        </div>
        <div>
          <div>
            <img
              src="@/assets/imgs/t.png"
              alt=""
              style="width: 254px; height: 294px"
            />
          </div>
          <div>
            <span
              style="
                width: 108px;
                height: 36px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #6a6a6a;
                font-size: 36px;
              "
              >毛用泽</span
            >
          </div>
        </div>
      </div>
    </div>
    <Bottom style="margin-top:260px" />
    <Topnav />
  </div>
</template>

<script>
import Topnav from "@/components/topnav.vue";
import Bottom from "@/components/bottom.vue";
import Headers from "@/components/headers.vue";

export default {
  name: "",
  data() {
    return {
      graphic: {
        title: "学科建设",
        imgherf: "@/assets/imgs/background2.png",
        text:
          "新的军事科学院学科布局从原有的军事学扩展到理、工、农、医、管、军等多个门类，形成了理论与技术相互融合支撑的全新发展格局。"
      }
    };
  },
  components: {
    Topnav,
    Bottom,
    Headers
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.bbb {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-top: 95px;
}
.bbb > div {
  width: 130px;
  height: 26px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #666666;
  font-size: 26px;
  margin-right: 100px;
  font-weight:  bold
}
.a {
  width: 1580px;
  height: 369px;
  background-color: #f4f4f4;
  border-radius: 5px;
  margin: auto;
  margin-top: 110px;
  position: relative;
}
.a-a {
  margin-left: 80px;
  line-height: 90px;
}
.a-a > span {
  width: 104px;
  height: 26px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #b21315;
  font-size: 26px;
  text-align: center;
}
.a-b > span {
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #666666;
  font-size: 18px;
  padding-bottom: 10px;
  line-height: 36px;
}
.a-b {
  width: 626px;
  height: 156px;
  margin-left: 80px;
  margin-top: 25px;
}
.a-c > img {
  width: 550px;
  height: 372px;
}
.a-c {
  position: absolute;
  top: 50px;
  right: 147px;
  z-index: 999999;
}
.a-d {
  width: 549px;
  height: 363px;
  background-color: #b21315;
  position: absolute;
  top: 64px;
  right: 141px;
}
.b {
  margin-left: 170px;
  margin-top: 213px;
}
.b > span {
  width: 320px;
  height: 32px;
  font-family: Source Han Sans CN;
  font-weight: 700;
  color: #666666;
  font-size: 32px;
  line-height: 1px;
}
.c {
  display: flex;
  margin-left: 170px;
  margin-top: 36px;
  text-align: center;
  line-height: 79px;
}
.c > div {
  width: 520px;
  height: 79px;
  background-color: #e4e4e4;
}
.c-a {
  width: 216px;
  height: 24px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  font-size: 24px;
  text-align: center;
}
.c-b {
  width: 168px;
  height: 24px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #666666;
  font-size: 24px;
  text-align: center;
}
.c-d {
  width: 144px;
  height: 24px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #666666;
  font-size: 24px;
  text-align: center;
}
.d {
  width: 1580px;
  height: 511px;
  background-color: #f4f4f4;
  border-radius: 5px;
  margin: auto;
  margin-top: 10px;
  display: flex;
}
.d-a > img {
  width: 550px;
  height: 391px;
  margin-top: 50px;
  margin-left: 160px;
}
.d-b {
  margin-left: 60px;
  margin-top: 88px;
}
.d-b-a {
  width: 216px;
  height: 24px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #b21315;
  font-size: 24px;
  line-height: 1px;
  text-align: center;
}
.d-b-b {
  margin-top: 30px;
  width: 650px;
  height: 145px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #666666;
  font-size: 18px;
  padding-bottom: 10px;
  line-height: 36px;
}
.d-b-c {
  margin-top: 90px;
  width: 152px;
  height: 38px;
  background-color: #333333;
  border-radius: 28px;
  text-align: center;
  line-height: 38px;
}
.e-a {
  display: flex;
  margin-left: 170px;
  margin-top: 36px;
}
.e-a > div {
  width: 520px;
  height: 79px;
  background-color: #e4e4e4;
  margin-right: 10px;
  text-align: center;
  line-height: 79px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #6a6a6a;
  font-size: 24px;
  text-align: center;
}
.f {
  display: flex;
}
</style>
